import React, { useState } from 'react'
import style from './style.module.scss'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faUserFriends, faUserPlus } from '@fortawesome/free-solid-svg-icons'

interface IFollowBtnProps {
    width: string
    height: string
    userId: string
    expend?: boolean
}

export default function FollowBnt(props: IFollowBtnProps) {
    const [expend, setExpend] = useState(false)
    return (
        <div
            className={`${style.container} ${expend ? 'active' : ''}`}
            onClick={() => {
                setExpend(!expend)
            }}
            style={{
                ['--width' as any]: props.width,
                ['--height' as any]: props.height
            }}>
            <FontAwesomeIcon icon={expend ? faUserFriends : faUserPlus} />
        </div>
    )
}
